<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem 0 2rem 0;
            padding-top: 70px; /* 为导航栏留空间 */
        }
        
        /* 导航栏样式 */
        .top-navbar {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030;
        }

        .top-navbar .navbar-brand {
            font-size: 1.3rem;
            letter-spacing: 0.5px;
            font-weight: 700;
        }

        .top-navbar .nav-link {
            color: rgba(255,255,255,0.85) !important;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            margin: 0 0.2rem;
            transition: all 0.2s;
        }

        .top-navbar .nav-link:hover,
        .top-navbar .nav-link.active {
            background: rgba(255,255,255,0.15);
            color: white !important;
        }

        .detail-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            background: white;
            overflow: hidden;
        }

        .product-image-section {
            background: #f8f9fa;
            padding: 3rem;
            text-align: center;
        }

        .product-main-image {
            max-width: 100%;
            height: 400px;
            object-fit: contain;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .info-section {
            padding: 2rem;
        }

        .product-title {
            font-size: 2rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
        }

        .product-brand {
            color: #6b7280;
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
        }

        .price-section {
            background: linear-gradient(135deg, #f0fdf4, #dcfce7);
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }

        .current-price {
            font-size: 2.5rem;
            font-weight: 700;
            color: #059669;
        }

        .original-price {
            font-size: 1.2rem;
            color: #9ca3af;
            text-decoration: line-through;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .info-item {
            background: #f9fafb;
            padding: 1rem;
            border-radius: 10px;
            border-left: 4px solid #4f46e5;
        }

        .info-label {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.25rem;
        }

        .info-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1f2937;
        }

        .description-section {
            background: #f9fafb;
            padding: 1.5rem;
            border-radius: 10px;
            margin-top: 2rem;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .btn-action {
            flex: 1;
            padding: 1rem;
            border-radius: 10px;
            font-weight: 600;
            border: none;
            transition: all 0.3s;
        }

        .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .badge-large {
            padding: 0.5rem 1rem;
            font-size: 1rem;
            border-radius: 20px;
        }

        .stats-row {
            display: flex;
            gap: 2rem;
            margin: 1.5rem 0;
        }

        .stat-item {
            text-align: center;
            flex: 1;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #4f46e5;
        }

        .stat-label {
            color: #6b7280;
            font-size: 0.875rem;
        }
    </style>
</head>

<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark top-navbar">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="/dashboard">
            <i class="bi bi-box-seam-fill me-2"></i>商品管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">
                        <i class="bi bi-speedometer2"></i> Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/product/list">
                        <i class="bi bi-box"></i> 商品管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/category/list">
                        <i class="bi bi-tags"></i> 分类管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/log/list">
                        <i class="bi bi-clock-history"></i> 操作日志
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/doc">
                        <i class="bi bi-book"></i> API文档
                    </a>
                </li>
            </ul>
            <div class="d-flex align-items-center">
                <!-- 用户信息 -->
                <div th:if="${currentUser}" class="me-3 text-white">
                    <small>欢迎,</small>
                    <strong th:text="${currentUser.realName ?: currentUser.username}"></strong>
                </div>
                
                <a href="/product/add" class="btn btn-light btn-sm me-2">
                    <i class="bi bi-plus-circle"></i> 新增商品
                </a>
                <a href="/druid" target="_blank" class="btn btn-outline-light btn-sm me-2">
                    <i class="bi bi-speedometer"></i> 监控
                </a>
                <!-- 登出按钮 -->
                <a href="/auth/logout" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-box-arrow-right"></i> 登出
                </a>
            </div>
        </div>
    </div>
</nav>

<script>
    // 自动高亮当前页面的导航项
    document.addEventListener('DOMContentLoaded', function() {
        const currentPath = window.location.pathname;
        const navLinks = document.querySelectorAll('.top-navbar .nav-link');

        // 移除所有active类
        navLinks.forEach(link => link.classList.remove('active'));

        // 根据当前路径添加active类
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            if (currentPath === href ||
                (href !== '/dashboard' && currentPath.startsWith(href))) {
                link.classList.add('active');
            }
        });
    });
</script>

<body>
<div class="container detail-container">
    <div class="card">
        <div class="row g-0">
            <!-- 左侧图片 -->
            <div class="col-lg-5">
                <div class="product-image-section">
                    <img th:src="${product.imageUrl ?: '/images/default-product.png'}"
                         class="product-main-image" alt="商品图片">

                    <!-- 状态标签 -->
                    <div class="mt-3">
                            <span th:if="${product.status == 1}" class="badge bg-success badge-large">
                                <i class="bi bi-check-circle"></i> 在售中
                            </span>
                        <span th:if="${product.status == 0}" class="badge bg-secondary badge-large">
                                <i class="bi bi-x-circle"></i> 已下架
                            </span>
                        <span th:if="${product.status == 2}" class="badge bg-danger badge-large">
                                <i class="bi bi-exclamation-triangle"></i> 缺货
                            </span>

                        <span th:if="${product.isHot == 1}" class="badge bg-danger badge-large ms-2">
                                <i class="bi bi-fire"></i> 热销
                            </span>
                        <span th:if="${product.isNew == 1}" class="badge bg-info badge-large ms-2">
                                <i class="bi bi-star"></i> 新品
                            </span>
                    </div>
                </div>
            </div>

            <!-- 右侧信息 -->
            <div class="col-lg-7">
                <div class="info-section">
                    <!-- 标题和品牌 -->
                    <h1 class="product-title" th:text="${product.productName}"></h1>
                    <p class="product-brand">
                        <i class="bi bi-award"></i>
                        <strong th:text="${product.brand ?: '暂无品牌'}"></strong>
                    </p>

                    <!-- 价格 -->
                    <div class="price-section">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="current-price">
                                    ¥<span th:text="${#numbers.formatDecimal(product.salePrice, 1, 2)}"></span>
                                </div>
                                <div class="original-price" th:if="${product.purchasePrice != null}">
                                    进货价: ¥<span th:text="${#numbers.formatDecimal(product.purchasePrice, 1, 2)}"></span>
                                </div>
                            </div>
                            <div class="text-end" th:if="${product.purchasePrice != null && product.salePrice != null}">
                                <div class="text-muted small">利润率</div>
                                <div class="fs-4 fw-bold text-success">
                                    <span th:text="${#numbers.formatDecimal(product.profitRate, 1, 2)}"></span>%
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 统计数据 -->
                    <div class="stats-row">
                        <div class="stat-item">
                            <div class="stat-number" th:text="${product.salesCount ?: 0}"></div>
                            <div class="stat-label">总销量</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" th:text="${product.viewCount ?: 0}"></div>
                            <div class="stat-label">浏览量</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" th:text="${product.stockQuantity ?: 0}"></div>
                            <div class="stat-label">库存量</div>
                        </div>
                    </div>

                    <!-- 详细信息 -->
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">商品编码</div>
                            <div class="info-value">
                                <code th:text="${product.productCode}"></code>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">商品分类</div>
                            <div class="info-value" th:text="${product.categoryName}"></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">规格</div>
                            <div class="info-value" th:text="${product.specification ?: '标准规格'}"></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">单位</div>
                            <div class="info-value" th:text="${product.unit ?: '件'}"></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">最小库存</div>
                            <div class="info-value" th:text="${product.minStock}"></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">最大库存</div>
                            <div class="info-value" th:text="${product.maxStock}"></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">库存状态</div>
                            <div class="info-value">
                                    <span th:if="${product.stockQuantity == 0}" class="text-danger">
                                        <i class="bi bi-x-circle"></i> 缺货
                                    </span>
                                <span th:if="${product.lowStock && product.stockQuantity > 0}" class="text-warning">
                                        <i class="bi bi-exclamation-triangle"></i> 库存不足
                                    </span>
                                <span th:if="${!product.lowStock && product.stockQuantity > 0}" class="text-success">
                                        <i class="bi bi-check-circle"></i> 正常
                                    </span>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">创建时间</div>
                            <div class="info-value" th:text="${#temporals.format(product.createdAt, 'yyyy-MM-dd HH:mm')}"></div>
                        </div>
                    </div>

                    <!-- 商品描述 -->
                    <div class="description-section" th:if="${product.description != null && !product.description.isEmpty()}">
                        <h6 class="mb-3"><i class="bi bi-card-text me-2"></i>商品描述</h6>
                        <p class="mb-0" th:text="${product.description}"></p>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <a th:href="@{/product/edit/{id}(id=${product.id})}"
                           class="btn btn-primary btn-action">
                            <i class="bi bi-pencil"></i> 编辑商品
                        </a>
                        <button class="btn btn-danger btn-action delete-btn"
                                th:data-id="${product.id}">
                            <i class="bi bi-trash"></i> 删除商品
                        </button>
                        <a href="/product/list" class="btn btn-secondary btn-action">
                            <i class="bi bi-arrow-left"></i> 返回列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> 确认删除</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除此商品吗？删除后将无法恢复！</p>
                <div class="alert alert-warning">
                    <strong>商品名称：</strong><span th:text="${product.productName}"></span><br>
                    <strong>商品编码：</strong><span th:text="${product.productCode}"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script th:inline="javascript">
    let deleteId = /*[[${product.id}]]*/ '';
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));

    function deleteProduct(id) {
        deleteId = id;
        deleteModal.show();
    }

    function confirmDelete() {
        $.ajax({
            url: `/product/delete/${deleteId}`,
            type: 'DELETE',
            success: function(result) {
                if (result.success) {
                    alert('删除成功！');
                    window.location.href = '/product/list';
                } else {
                    alert('删除失败：' + result.message);
                }
            },
            error: function() {
                alert('删除失败，请稍后重试！');
            }
        });
    }
</script>
</body>
</html>